<template>
  <div>
    <el-drawer @close="close" title="添加问题" :visible.sync="typeFlag" direction="rtl">
      <div class="df aic fww p20">
        <div
          :class="{ active: currentIndex === index }"
          @mouseover="currentIndex = index"
          @mouseout="currentIndex = null"
          class="colBox"
          @click="addQuestion(dict)"
          v-for="(dict,index) in dict.type.question_type"
          :key="index"
        >
          <el-image v-if="dict.raw.image" style="width: 20px; height: 20px" :src="dict.raw.image"></el-image>
          <i v-else class="el-icon-s-tools" style="color:#8a8a8a"></i>
          <div class="mt5">{{dict.label}}</div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  props: {
    typeFlag: {
      default: false
    }
  },
  data() {
    return {
      currentIndex: null
    };
  },
  dicts: ["question_type"],
  methods: {
    close() {
      this.$emit("close");
    },
    addQuestion(dict) {
      this.$emit("addQuestionFn", dict);
    }
  }
};
</script>
<style scoped>
.colBox {
  background: #f2f3f3;
  border-radius: 4px;
  text-align: center;
  padding: 15px 4px;
  width: 23%;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.colBox.active {
  background-color: #e6e7e8;
}
</style>